<template>
  <el-container class="page">
    <el-header class="navbar">
      <div class="navbar-inner">
        <div class="left">
			<el-page-header title=" ">
				<template #icon>
					<el-icon @click="back"><ArrowLeftBold/></el-icon>
				</template>
				<template #content>
					<span class="text">反馈任务列表</span>
				</template>
			</el-page-header>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-card class="main">
        <el-table :data="taskList" style="width: 100%" :show-header="false">
          <el-table-column prop="level" width="60">
            <template #default="{ row }">
              <div class="level" :style="{backgroundColor:levelColor(row.levelNum)}">{{ row.levelNum }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="province.city_and_date" width="200">
            <template #default="{ row }">
              <div class="info-container">
                <div class="province-city_and_date">{{ row.province.name }}-{{ row.city.name }} {{ row.date }}</div>
                <div class="address">{{ row.address }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="100">
            <template #default="{ row }">
              <el-button type="primary" class="cu-btn-sm-bg-blue-round" @click="test(row)">去检测<el-icon class="pointer"><Pointer/></el-icon></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { reactive, onMounted} from 'vue';
import { ArrowLeftBold, Pointer} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import axios from '@/utils/axiosUtil.js';
import router from '@/router';
let user = reactive({})
let taskList = reactive([])

let back = function(){
	sessionStorage.removeItem('token');
	router.push({path:"/"})
}
function parseJWT(token) {
  // 分割JWT的三个部分
  let parts = token.split('.');
  let base64Url = parts[1];
  let rawData = atob(base64Url.replace(/-/g, '+').replace(/_/g, '/')); // 替换URL安全的字符
  let decoder = new TextDecoder('utf-8');
  let payload = JSON.parse(decoder.decode(new Uint8Array(rawData.split('').map(c => c.charCodeAt(0)))));
  return payload;
}
let token = sessionStorage.getItem("token")
user=parseJWT(token)
console.log(user.adminCode)

let getTaskList = function(){
	axios.get("http://localhost:7000/service-nepg/grider/getList", {params : {code:user.adminCode}}).then(res=>{
    taskList.splice(0,taskList.length,...res.data)
    if(taskList.length==0)
      ElMessage({
				message:"当前没有待检测数据",
				type:"warning",
			});
	})
	console.log(taskList)
}
let levelColor = (level)=>{
	let color; 
	switch (level) { 
		case 1: color = '#1be21f'; break; 
		case 2: color = '#dddd23'; break; 
		case 3: color = '#fc8016'; break; 
		case 4: color = '#f5150d'; break; 
		case 5: color = '#970c4d'; break; 
		case 6: color = '#5e041a'; break; 
		default: color = 'black'; 
		} 
		return color ;
	}
	
const test = (item) => {
	router.push({
		path : '/detailsPage',
		query : {
			data : JSON.stringify(item)
		}
	})
	console.log('测试按钮点击', item);
};


onMounted(()=>{
	getTaskList()
})
</script>

<style scoped>
.page {
  height: 100vh;
  background: url('@/assets/kongjing1.jpg');
  background-size: cover;
}
.text {
  color: white;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
 background: linear-gradient(to right, #607baa, #7d95c5); /* 使用渐变色 */
  color: white;
  padding: 10px;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none; /* 去除默认的列表项符号 */
}

.cu-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px dashed #ccc; /* 为每个列表项添加虚线分割线 */
}

.cu-item:last-child {
  border-bottom: none; /* 确保列表的最后一个项没有分割线 */
}

.level{
	width: 40px;
	height: 40px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	font-weight: bold;
}
.level-container {
  flex: 0 0 auto; /* 确保level区块不伸缩，保持原始尺寸 */
  margin-right: 20px; /* 右侧间隔 */
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.info-container {
  flex-grow: 1; /* 让信息区块填充剩余空间 */
  display: flex;
  flex-direction: column; /* 项目垂直排列 */
  padding-left: 0px; /* 调整左侧内边距 */
}

.province-city_and_date, .address {
  padding: 2px 0; /* 给省市日期和地址添加适当的内边距 */
}

.cu-btn-sm-bg-blue-round:hover {
  background-color: #6154db; /* 悬停时颜色稍微变深 */
}

.cu-btn-sm-bg-blue-round {
  margin-left: auto; /* 将按钮推到右侧 */
  background-color: #739bf2; /* 蓝色背景 */
  color: white; /* 白色文字 */
  border: none; /* 去掉边框 */
  padding: 5px 5px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  text-align: center; /* 文本居中 */
}

.button-icon {
  margin-left: 5px; /* 图标与文字之间的间距 */
}

.pointer{
	margin-left: 5px; /* 右侧间隔 */
	transform: rotate(90deg); /* 顺时针旋转90度 */
}
</style>
